// 自适应高度变化的swiper图片轮播
import {api,util,dialog, storage} from '../../js/util'
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    imgList: { // 图片组
      type: Array,
      value: []
    },
    mode: { // 图片缩放样式
      type: String,
      value: 'widthFix'
    },
    indicatorDots: { // 是否显示swiper的点
      type: Boolean,
      value: true
    },
    indicatorColor: { // swiper的点的颜色
      type: String,
      value: '#fff'
    },
    indicatorActiveColor: { // swiper的点选中时的颜色
      type: String,
      value: '#09bb07'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    enableOss: api.enableOss,
    imgDomain: api.imgDomain,
    list: [], // 需要渲染的列表
    current: 0, // 当前活动项
    width: '750rpx', // 当前图片的宽度
    height: '400rpx' // 当前图片的高度
  },

  lifetimes: {
    attached () {
      console.log((new Date()).getTime())
      this.getImgListInfo()
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 获取全部图片的宽高信息
    getImgListInfo: async function () {
      let imgList = this.data.imgList
      let imgDomain = this.data.imgDomain
      for (let i in imgList) {
        let src = imgDomain + imgList[i]
        let imgInfo = await this.getImageInfo(src)
        imgList[i] = {
          src: imgList[i],
          height: imgInfo.height,
          width: imgInfo.width
        }
      }
      let width = '750rpx'
      let height = '400rpx'
      if (imgList.length > 0) {
        width = imgList[0].width
        height = imgList[0].height
      }
      this.setData({
        list: imgList,
        width,
        height
      })
      console.log((new Date()).getTime())
    },
    // 获取单个图片的宽高信息
    getImageInfo (src) {

      // 如果可以使用oss缩放，则使用缩放获取小图片信息，提高获取图片宽高比的速度
      let enableOss = this.data.enableOss
      if (enableOss) {
        src += '?x-oss-process=image/resize,w_10,m_lfit'
      }
      return new Promise((resolve) => {
        src = src.replace(/http:\/\//, 'https://')
        wx.getImageInfo({
          src: src,
          success (res) {
            // 计算图片如果宽度750rpx时，等比例缩放后的高度
            let rpxHeight  =  (res.height * 750 / res.width).toFixed(2)
            resolve({
              width: '750rpx',
              height: `${rpxHeight}rpx`
            })
          },
           fail (err) {
            resolve({
              width: '750rpx',
              height: '400rpx'
            })
           }
        })
      })
    },
    // swiper改变时，将swiper的宽高改为当前图片的宽高
    changeSwiper (e) {
      let list = this.data.list
      let current = e.detail.current
      this.setData({
        current: current,
        width: list[current].width,
        height: list[current].height
      })
    },
    tapItem (e) {
      let index = e.currentTarget.dataset.index
      this.triggerEvent('tapItem', {
        index
      })
    },
  }
})
